
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm2 layui-col-md2 layui-col-lg2">
            <!-- 填充内容,,,,,,扫码枪md大小在这里 -->
            <div class="layui-card">
                <div class="layui-card-header">机务工程部</div>
                <div class="layui-card">
                    <div class="layui-card-header">分类选择</div>
                    <div class="layui-card-body">
                        <div id="test1"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md8">
            <div class="layui-card">
                <div class="layui-card-header">知识88库</div>
                <div class="layui-card-body">
                    <div class="test-table-reload-btn" style="margin-bottom: 10px;">
                        <div class="layui-card" style="height: 47px">
                            <a class="layui-btn layui-btn-normal layui-btn-radius" href="#/cpa/publish_article"
                               data-type="add" target="_blank">发表文章</a>
                            <div class="layui-col-md5">
                                搜索标题：
                                <div class="layui-inline">
                                    <input class="layui-input" name="id" id="test-table-demoReload" autocomplete="off">
                                </div>
                                <button class="layui-btn" data-type="reload" id="search_title_btn">搜索</button>
                            </div>
                            <div class="layui-col-md5">
                                搜索作者：
                                <div class="layui-inline">
                                    <input class="layui-input" name="id" id="test-table-demoReload2" autocomplete="off">
                                </div>
                                <button class="layui-btn" data-type="reload" id="search_author_btn">搜索</button>
                            </div>
                        </div>
                    </div>
                    <table class="layui-hide" id="test-table-reload" lay-filter="test-table-reload"></table>
                    <table class="layui-hide" id="test-table-reload2" lay-filter="test-table-reload2"></table>
                    <table class="layui-hide" id="test-table-operate" lay-filter="test-table-operate"></table>

                    <script type="text/html" id="test-table-operate-barDemo">
                        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
                        <a class="layui-btn layui-btn-xs"
                           data-type="add" target="_blank" lay-event="edit">编辑</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </script>
                </div>
            </div>
        </div>
        <div class="layui-col-md2">
            <!-- 填充内容,,,,,,扫码枪md大小在这里 -->
            <div class="layui-card">
                <div class="layui-card-header">最新发布</div>
                <div class="layui-card-header">最近活跃</div>
            </div>
        </div>
    </div>
</div>

<script>
    layui.use(['table', 'layer', 'tree', 'util'], function () {
        var $ = layui.$
            , table = layui.table

        //方法级渲染
        table.render({
            elem: '#test-table-reload'
            , url: '/article_form/'
            , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'limits', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                , limit: 30
                , limits: 20
                , count: 100000
                , groups: 1 //只显示 1 个连续页码
                , first: false //不显示首页
                , last: false //不显示尾页
            }
            , height: 'full-145'
            , cellMinWidth: 80
            , cols: [[
                {checkbox: true, fixed: true}
                , {field: 'title', title: '文章标题', align: 'center', width: 105}
                , {field: 'author', title: '文章作者', width: 104, align: 'center', sort: true}
                , {field: 'publish_time', title: '发布时间', sort: true, align: 'center', width: 150}
                , {
                    field: 'content', title: '文章正文', event: 'title', style: 'cursor: pointer;',
                    minWidth: 190, align: 'center', width: 200
                }
                , {field: 'classify', title: '所属分类', minWidth: 200, align: 'center', width: 200}
                , {
                    field: 'option', title: '操作', width: 178, align: 'center',
                    fixed: 'right', toolbar: '#test-table-operate-barDemo'
                }
            ]]
        });
        console.log('111112123')
        //监听行单击事件（单击事件为：rowDouble）//这里出发文章后打开新网页，并且可以编辑，保存。
        table.on('tool(test-table-reload)', function (obj) {
            var data = obj.data;
            console.log('44444')
            console.log(data.id)

            if (obj.event === 'title') {
                // console.log(data.title) // 打出的是选择的当前的文章的标题
                window.open('#/cpa/detail_article/article_id=' + data.id)   // **
            } else if (obj.event === 'detail') {
                window.open('#/cpa/detail_article/id=' + data.id)   // **
            } else if (obj.event === 'edit') {
                window.open('#/cpa/edit_article/id=' + data.id)

                // **
            }
            //标注选中样式
            obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');

        });

        //执行重载(光标移此输入框id)
        $('#search_title_btn').on('click', function () {
            var search_input_front = $('#test-table-demoReload').val();
            console.log("我在这里136")
            console.log(search_input_front)
            table.reload('test-table-reload', {
                url: '/input_title/'
                , method: 'post'
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
                , where: {
                    search_input_title: search_input_front,
                    //前面一个search_input_back变量是后端的，后面一个search_input_front是前端的往后端传的
                    key: {
                        // id: '#test-table-demoReload'
                    }
                }
            });
            document.getElementById("test-table-demoReload").value = "";
            // # 这行表示当输入框输入数据后按下回车之后，输入框内容自动删除
        });

        //执行重载(搜索作者)
        $('#search_author_btn').on('click', function () {
            var search_input_front2 = $('#test-table-demoReload2').val();
            console.log("我在这里129")
            console.log(search_input_front2)
            table.reload('test-table-reload', {
                url: '/input_author/'
                , method: 'post'
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
                , where: {
                    search_input_author: search_input_front2,
                    //前面一个search_input_author变量是后端的，后面一个search_input_front2是前端的往后端传的
                    key: {
                        // id: '#test-table-demoReload'
                    }
                }
            });
            document.getElementById("test-table-demoReload2").value = "";
            // # 这行表示当输入框输入数据后按下回车之后，输入框内容自动删除
        });


        //tree
        console.log('asdasdaw')
        var tree = layui.tree
            , layer = layui.layer
            , util = layui.util

            //模拟数据1
            , data1 = [{
                title: '机械'
                , id: 1
                , children: [{
                    title: '发动机'
                    , id: 1000
                    , children: [{
                        title: '增压'
                        , id: 10001
                    }, {
                        title: '引气'
                        , id: 10002
                    }]
                }, {
                    title: '起落架'
                    , id: 1001
                }, {
                    title: '辅助动力装置'
                    , id: 1002
                }]
            }, {
                title: '电子'
                , id: 2
                , children: [{
                    title: '自动驾驶'
                    , id: 2000
                    , children: [{
                        title: '自动飞行'
                        , id: 20001
                    }, {
                        title: '自动油门'
                        , id: 20002
                    }]
                }, {
                    title: '通讯系统'
                    , id: 2001
                }, {
                    title: '仪表系统'
                    , id: 2002
                }, {
                    title: '导航系统'
                    , id: 2003
                }]
            }]

        //仅节点左侧图标控制收缩
        //常规用法
        tree.render({
            elem: '#test1' //默认是点击节点可进行收缩
            ,data: data1
            ,id: 'demoId1'
            ,showCheckbox: true //是否显示复选框
            ,isJump: true //是否允许点击节点时弹出新窗口跳转
            ,showLine: true //是否开启连接线
            ,edit: ['add', 'update', 'del'] //开启操作节点的图标
            ,click: function(obj){
                var data = obj.data; //获取当前点击的节点数据
                // layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data));
            }
        });

        //按钮事件
        console.log('hahaha')
        util.event('lay-demo', {
          getChecked: function(othis){
            var checkedData = tree.getChecked('demoId1'); //获取选中节点的数据

            layer.alert(JSON.stringify(checkedData), {shade:0});
            console.log(checkedData);
          }
          ,setChecked: function(){
            tree.setChecked('demoId1', [3, 4]); //勾选指定节点
          }
          ,reload: function(){
            //重载实例
            tree.reload('demoId1', {});
          }
        });

        //这里出发click事件
        console.log('345345')
        $('.layui-btn.layui-btn-normal').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

    });
</script>





